<%@ taglib prefix="s" uri="/struts-tags"%>
<style type="text/css">
<!--
div#headerLeft {
	width: 50%;
}

div#headerRight {
	width: 50%;
	padding-top: 10px;
}

div#headerRight span {
	font-size: 11px;
	color: black;
}
-->
</style>
<script type="text/javascript">
  $(function() {
    jQuery.ajax({
      url : '${pageContext.request.contextPath}/getActiveUser.action',
      dataType : 'json',
      async : false,
      cache : false,
      success : function(data) {
        $('#activeUserSpan').text(data.username);
      }
    });
    $('#userProfile').css({
      'position' : 'relative',
      'left' : '65%',
    }).hover(function() {
      var menu = $(this).next().show().position({
        my : "left top",
        at : "left bottom",
        of : this
      });
      $(document).one("click",function() {
        menu.hide();
      });
      return false;
    }).next().css({
      'width' : '185px',
      'z-index' : 10000,
      'position' : 'absolute'
    }).on({
      'mouseleave' : function(event) {
        $(this).hide();
      }
    }).hide().menu();
  });
</script>
<div id="headerDiv">
  <div class="table" style="height: 50px;">
    <div class="row ui-widget-header" style="height: 30px;">
      <div class="cell" id="headerLeft">&nbsp;</div>
      <div class="cell" id="headerRight">
        <a href="#" id="userProfile"><span>Welcome,&nbsp;</span><span id="activeUserSpan"></span></a>
        <ul>
          <li><a href="${pageContext.request.contextPath }/userProfile/viewChangePassword"
            class="clickableMenu">Change Password</a></li>
          <li class="ui-separator"></li>
          <li><a href="${pageContext.request.contextPath }/j_spring_security_logout"
            class="clickableMenu" id="logout">Logout</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>